<!DOCTYPE html>
<html lang="en">
	
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" href="../css/base.css">
	<link rel="stylesheet" href="../css/index.css">
	<link rel="stylesheet" href="../swiper/swiper-bundle.min.css">
	<style>
		html,
		body {
		  position: relative;
		  height: 100%;
		}
	
		body {
		  background: #eee;
		  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		  font-size: 14px;
		  color: #000;
		  margin: 0;
		  padding: 0;
		}
	
		.swiper {
		  width: 100%;
		  height: 100%;
		}
	
		.swiper-slide {
		  text-align: center;
		  font-size: 18px;
		  background: #fff;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
	
		.swiper-slide img {
		  display: block;
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		}
	  </style>
</head>

<body>
	<div class="header container">
		仿站电商平台
		<p class="off active">您好！<a href="./login.html">请登录</a></p>
		<p class="on ">你好！
			<span class="nickname">用户昵称</span>
			<button class="self">个人中心</button>
			<button class="logout">退出登录</button>
		</p>
	</div>
	<div class="list container"><a href="./list.html">购买商品</a></div>

	<!-- 如需重新渲染新图片,只需渲染#carousel 元素对一个内容即可-->
	<div class="layui-carousel container" id="carousel">
		<div carousel-item>
			<div class="swiper mySwiper">
				<div class="swiper-wrapper">
				  <div class="swiper-slide"><img src="../img/img1.jpg"></div>
				  <div class="swiper-slide"><img src="../img/img2.jpg"></div>
				  <div class="swiper-slide"><img src="../img/img3.jpg"></div>
				  <div class="swiper-slide"><img src="../img/img4.jpg"></div>
				  <div class="swiper-slide"><img src="../img/img5.jpg"></div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			  </div>
		</div>
	</div>

<script src="../js/index.js" type="module"></script>
<script src="../swiper/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
	  autoplay:true,
    });
  </script>
</body>

</html>